<template>
	<view class="mine-container">
		<!--顶部个人信息栏-->
		<view class="content-section">
			<view>
				<uni-list class="mine-actions grid ">
				<uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar'}" title="日期"
					:rightText="dailyDetail.fillDate" />
				<uni-list-item showExtraIcon="true" :extraIcon="{type: 'medal'}" title="工时数"
					:rightText="dailyDetail.useHourTotal + '小时'" />
				<uni-list-item showExtraIcon="true" :extraIcon="{type: 'more-filled'}" title="提交时间"
					:rightText="dailyDetail.createTime" />
				</uni-list>
			</view>

			<view>
				<view v-for="(item, index) in dailyDetail.projectList" :key="index">
					<uni-card :title="item.projectName" :extra="item.useHour +'小时'" class="card">
						<view class="card-second">
								<text>工作内容：</text>
								<text>{{ item.daily? item.daily:'无' }}</text>
						</view>
					</uni-card>
				</view>

			</view>
			
			<view class="chat-footer">
				<view class="send-btn" @click="handleEdit" >修改工时</view>
			</view>

		</view>
		
	</view>
</template>

<script>
	import storage from '@/utils/storage';
	import {
		getMyHourDetailt
	} from "@/api/mhour/project";

	import {
		getDailyDetail
	} from "@/api/dataStat/review";
	import {
		geApptConfig
	} from "@/api/system/appsSet";
	export default {
		data() {
			return {
				dailyDialog: false,
				//工时传参
				hourId: '',
				//工时项目信息
				dailyDetail: {
					projectList: [],
					fillDate: null,
					useHourTotal: 0,
					createTime: null,
					hourId: 0,
					dayType: 0,
				},
				settiingsdata: {},



			}
		},
		onLoad() {

		},
		
		mounted() {
			this.hourId = this.$route.query.hourId;
			this.open();
		},


		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		methods: {
			
			reload(){
				this.dailyDetail.useHourTotal =0;
				this.open();
			},
			
			settings() {
				geApptConfig().then(res => {
					//console.log("settings", res);
					if (res.code == 200) {
						this.setting = res.data;
					}
				});
			},
			open() {
				if (this.hourId == null) {
					this.$modal.msgError("没有填报信息，请重新选择")
					return;
				}
				
				getDailyDetail(this.hourId).then(res => {
					console.log("res", res);
					if (res.code == 200) {
						if (res.data == []) {
							//this.dailyDetail = 0;
						} else {
							this.dailyDetail.hourId = res.data[0].hourId;
							this.dailyDetail.fillDate = res.data[0].fillDate;
							this.dailyDetail.createTime = res.data[0].createTime;
						}
						this.dailyDetail.projectList = res.data;
						this.dailyDetail.projectList.forEach(el => {
							this.dailyDetail.useHourTotal += el.useHour;
							el.workTypeId = el.workTypeHourList[0].workTypeId;
						});
					}
					if (res.code == 500) return;
				})
				console.log("getMyHourDetailt", this.dailyDetail);
			},

			handleEdit() {
				//this.dailyDialog = false;
				this.$tab.navigateTo('/pages/mhour/edit?hourId=' + this.hourId)
			},


		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			padding: 15px 15px 45px 15px;
			background-color: #3c96f3;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}
		}

		.content-section {
			position: relative;
			top: 0px;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {
					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}

	
	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.card {
		margin: 15px 15px;
		box-sizing: border-box;

	}

	.card-second {
		display: flex;
		border-bottom: 1px #EBEEF5 solid;
		flex-direction: row;
		align-items: flex-start;
		padding: 1px;
		overflow: hidden;
	}

	.card-left {
		flex: 1;

	}

	.card-right {
		.button {
			padding-left: 10px;
			padding-right: 10px;

		}
	}

	.chat-footer {
		width: 100%;
		padding: 0 20upx;
		height: 120upx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #f1f1f1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		border-top: 1upx solid #ddd;
		
		.send-btn {
			height: 60upx;
			line-height: 60upx;
			width: 120upx;
			text-align: center;
			background-color: green;
			color: #FFFFFF;
			border-radius: 12upx;
		}
	
	}
	
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	
	}
	.mine-actions {
		margin: 15px 15px;
		padding: 20px 0px;
		border-radius: 8px;
		background-color: white;
	
		.action-item {
			.icon {
				font-size: 28px;
			}
	
			.text {
				display: block;
				font-size: 13px;
				margin: 8px 0px;
			}
		}
	}
</style>